@{
    ViewData["Title"] = "按钮样式测试";
    Layout = "_Layout";
}

<div class="layui-container-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>Layui按钮样式测试</h3>
                </div>
                <div class="layui-card-body">
                    <h4>基础按钮</h4>
                    <div class="layui-btn-container">
                        <button class="layui-btn">默认按钮</button>
                        <button class="layui-btn layui-btn-primary">主要按钮</button>
                        <button class="layui-btn layui-btn-normal">正常按钮</button>
                        <button class="layui-btn layui-btn-warm">暖色按钮</button>
                        <button class="layui-btn layui-btn-danger">危险按钮</button>
                    </div>

                    <h4>按钮尺寸</h4>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-xs">超小按钮</button>
                        <button class="layui-btn layui-btn-sm">小按钮</button>
                        <button class="layui-btn">默认按钮</button>
                        <button class="layui-btn layui-btn-lg">大按钮</button>
                    </div>

                    <h4>Knowledge页面按钮</h4>
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-normal" id="uploadButton">
                            <i class="fas fa-upload"></i> 上传文档
                        </button>
                        <button type="button" class="layui-btn layui-btn-warm" id="refreshButton">
                            <i class="fas fa-refresh"></i> 刷新
                        </button>
                        <button class="layui-btn layui-btn-primary" type="button" id="searchButton">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <h4>表格操作按钮</h4>
                    <div class="layui-btn-container">
                        <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                    </div>

                    <h4>按钮点击测试</h4>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal" id="testButton1">测试按钮1</button>
                        <button class="layui-btn layui-btn-warm" id="testButton2">测试按钮2</button>
                        <button class="layui-btn layui-btn-danger" id="testButton3">测试按钮3</button>
                    </div>

                    <div id="testResult" style="margin-top: 15px; padding: 10px; background-color: #f8f8f8; border: 1px solid #e6e6e6; display: none;">
                        <h5>测试结果</h5>
                        <p id="resultText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.layui-btn-container {
    margin-bottom: 20px;
}

.layui-btn-container .layui-btn {
    margin-right: 10px;
    margin-bottom: 10px;
}

h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
}
</style>

@section Scripts {
    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            console.log('按钮测试页面加载完成');
            
            // 测试按钮点击事件
            $('#testButton1').on('click', function() {
                showResult('测试按钮1被点击了！');
                layer.msg('测试按钮1点击成功', {icon: 1});
            });
            
            $('#testButton2').on('click', function() {
                showResult('测试按钮2被点击了！');
                layer.msg('测试按钮2点击成功', {icon: 1});
            });
            
            $('#testButton3').on('click', function() {
                showResult('测试按钮3被点击了！');
                layer.msg('测试按钮3点击成功', {icon: 1});
            });
            
            // Knowledge页面按钮测试
            $('#uploadButton').on('click', function() {
                showResult('上传文档按钮被点击了！');
                layer.msg('上传文档按钮点击成功', {icon: 1});
            });
            
            $('#refreshButton').on('click', function() {
                showResult('刷新按钮被点击了！');
                layer.msg('刷新按钮点击成功', {icon: 1});
            });
            
            $('#searchButton').on('click', function() {
                showResult('搜索按钮被点击了！');
                layer.msg('搜索按钮点击成功', {icon: 1});
            });
        });

        function showResult(text) {
            $('#resultText').text(text);
            $('#testResult').show();
            
            // 3秒后隐藏结果
            setTimeout(function() {
                $('#testResult').hide();
            }, 3000);
        }
    </script>
} 